<template>
  <div class="my-login-contain-background">
    <!--头像框区域-->
    <div class="img-box">
      <img alt="" src="../assets/logo.png">
    </div>
    <!--登录表单区域-->
    <div class="login-external-box">
      <MyLoginForm></MyLoginForm>
    </div>
  </div>
</template>

<script>
import MyLoginForm from '@/components/loginContent/myLoginForm'
export default {
  name: 'Login',
  components: { MyLoginForm }
}
</script>

<style lang="scss" scoped>
.my-login-contain-background {
  background-color: #a7e5e8;
  height: 100%;
  width: 100%;
  .img-box{
    width: 100px;
    height: 100px;
    position: absolute;
    border-radius: 50%;
    background-color: #b9f3d4;
    top: 20%;
    left: 50%;
    transform: translate(-50%,0);
    box-shadow: 0 0 5px 5px #f6edb6;
    img{
      width: 100%;
      height: 100%;
      border-radius: 50%;
    }
  }
  .login-external-box {
    width: 35%;
    height: 30%;
    background-color: #f5c7c7;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
  }
}
</style>
